<template>
	<view class="container">
		<uni-card  :is-shadow="false" is-full class="uni-card">
			<view class="cover-image">
				<image style="width: 100%;" :src="userInfo.avatar" ></image>
			</view>
			<view class="head">
				<image :src="cover" class="avatar"></image>
				<text>{{userInfo.nickName}}</text>
			</view>
			<view class="content">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" ref="contentRef">
					<view v-for="(item,index) in list" class="detail" @click="detail(item.id)">
						<image :src="item.img" class="image"></image>
						<text class="text">{{item.content}}</text>
					</view>
				</scroll-view>
				<view v-if="showTop">
					<uni-icons   @tap="goTop" class="top" type="up" size="25"></uni-icons>
				</view>
			</view>
			
		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import {ref,nextTick} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const userInfo = ref({
		avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水'
	})
	onLoad((option) => {
	  console.log(option.userId); //打印出上个页面传递的参数。
	  uni.setNavigationBarTitle({
	  	title:'湖水的照片圈'
	  })
	});
	const list=ref([
		{
			img:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content:'发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片',
			id:1
		},
		{
			img:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content:'发布一张可爱的图片',
			id:2
		},
		{
			img:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content:'发布一张可爱的图片发布一张可爱的图片',
			id:3
		},
		{
			img:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content:'发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片',
			id:4
		}
	])
	const cover = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
	const scrollTop=ref(0)
	const showTop=ref(false)
	const scrollHeight=ref(300)
	const detail=(id)=>{
		uni.navigateTo({
			url:'/pages/my/photocircle/detail?id='+id
		})
	}
	const old=ref({
		scrollTop: 0
	})
	const upper=(e)=> {
		console.log(e)
	}
	const lower=(e)=> {
		console.log(e)
	}
	const scroll=(e)=> {
		console.log("japde:"+e.detail.scrollTop)
		if(e.detail.scrollTop > 0){
			showTop.value=true;
		}else{
			showTop.value=false;
		}
		console.log(e)
		old.value.scrollTop = e.detail.scrollTop
	}
	const contentRef=ref()
	const goTop=(e)=>{
		// 解决view层不同步的问题
		scrollTop.value = old.value.scrollTop
		 nextTick(function() {
			scrollTop.value = 0
		}); 
		
	}
	const res = uni.getSystemInfoSync();
	const screenWidth = res.screenWidth;
	const screenHeight = res.screenHeight;
	console.log("App d load"+screenHeight);
	scrollHeight.value = screenHeight/2
</script>

<style lang="scss">
	
	.container {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: red;
	}
	.head{
		background-color: #fff;
		display: flex;
		justify-content: right;
		align-items: center;
		padding: 2%;
	}
	.avatar{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 2%;
	}
	.cover-image{
		background-color: #fff;
	}
	.scroll-Y {
		height: 300px;
		background-color: red;
	}
	.content{
		// display: position;
		height: 100%;
	}
	.detail{
		height: 100px;
		background-color: #fff;
		border-right: 1px dashed gray;
		display: flex;
		align-items: center;
		margin-bottom: 4%;
	}
	.top{
		position: fixed;background-color: #fff;
		width:40px;height:40px;
		border-radius:50%; 
		right: 5%; 
		bottom: 5%; 
		transform: translateY(50%);
	}
	.uni-card{
		height: 100%;
	}
	.image{
		// width: 60px;
		height: 80px;
		width: 80px;
	}
	.text{
	  width: 80%;
	  padding-left: 2%;
	  padding-right: 2%;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
</style>
